<template>
    <div id="Forum">
        <transition name="viewPage">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import Axios from "axios";

    export default {
        name: 'Forum',
        components: {

        },
        methods: {
            verifyLog() {
                // let that = this;

                // 读取 cookie 信息
                let forumTokenCookie = this.$jsCookie.get('forumTokenCookie');

                if (undefined === forumTokenCookie) {
                    // cookie 失效，引导用户登陆
                    this.$router.push({ name:'registerLog' })
                } else {
                    // cookie 未失效，进行用户登陆状态验证
                    Axios.post(
                        'http://xxx.com/xxx/xxx',
                        {
                            // 注册用户，并获取返回的 token 和 peopleId
                            code: 0,
                            msg: '用户登陆状态验证',
                            data: {
                                peopleId: forumTokenCookie.peopleId,
                                token: forumTokenCookie.token
                            },
                            isSuccess: false
                        }
                    ).then(resp => {
                        // 承接接口回文数据
                        // {
                        //     "data": {},
                        //     "msg": "用户 token 依然生效",
                        //     "code": 200,
                        //     "isSuccess": true
                        // }
                        //
                        // {
                        //     "data": {},
                        //     "msg": "用户 token 验证错误",
                        //     "code": 502,
                        //     "isSuccess": false
                        // }
                        let respCode = resp.data.code;

                        if (respCode === 200) {
                            // 正常，token 未失效，继续访问
                            // 以后添加一些需要记录的东西
                            // 例如设定 vuex 中的判定字段，用于避免重复多次验证
                        } else if (respCode === 501) {
                            // bean 验证错误
                            console.log('bean验证错误')
                        } else if (respCode === 502) {
                            // token 验证失败
                            console.log(
                                'token 验证失败，后台已记录此次通信记录，请勿尝试修改cookie文件进行非法访问，' +
                                '题必解保留对用户非法行为造成题必解损失的一切法律追究权利！'
                            );
                        } else if (respCode === 555) {
                            console.log('未知错误，请将该信息提交给官方进行问题纠错');
                        } else {
                            console.log('其他错误');
                        }
                    }).catch(err => {
                        // 异常执行
                        console.log(err);
                        // console.log('请求失败：' + err.status + ',' + err.statusText)
                    })
                }
            },
        },
        created() {
            // 用户登陆状态验证
            // this.verifyLog();
        }
    }
</script>

<style lang="scss">
    body{
        margin: 0;
        padding: 0;

        svg {
            vertical-align: baseline;   // 该项用于解决 bootstrap 导致的 ant design 图标错位问题
        }

        #Forum {

        }
    }

    .viewPage-enter {
        transform: translateX(30px);
        opacity: 0;
    }
    .viewPage-enter-active {
        transition: all 1.2s linear;
    }
    .viewPage-enter-to {
        transform: translateX(0);
        opacity: 1;
    }
    .viewPage-leave-active {
        transition: all 0.6s linear;
    }
    .viewPage-leave-to {
        transform: translateX(-30px);
        opacity: 0;
    }
</style>
